<template>
	<view class="data">
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    <img class="all" src="../../static/background/blue1.jpg" />
    <!-- 背景图片 -->
    <view class="title1">
      <text class="text1">今日厕所臭味有害气体情况：</text>
    </view>
    <!-- 厕所臭味气体情况 (总体体现) -->
    <view id="navView">
      <view class="gas">
        <img src="../../static/NH3.png"/>
        <text>氨气 \n 含量：{{ deviceData.hydrogen }}</text>
      </view>
      <view class="gas">
        <img src="../../static/H2S.png"/>
        <text>硫化氢 \n 含量：{{deviceData.hydrogen_sulfide}}</text>
      </view>
      <view class="gas">
        <img src="../../static/others.png"/>
        <text>甲酸醇 \n 含量：{{deviceData.methanol}}</text>
      </view>
      <view class="gas">
        <img src="../../static/others.png"/>
        <text>甲硫二醇 \n 含量：{{deviceData.ethylene_glycol}}</text>
      </view>
      <view class="gas">
        <img src="../../static/others.png"/>
        <text>乙胺 \n 含量：{{deviceData.ethylamine}}</text>
      </view>
      <view class="gas">
        <img src="../../static/others.png"/>
        <text>吲哚 \n 含量：{{deviceData.indole}}</text>
      </view>
    </view>

    <!-- 勾选气体 查看往日情况数据可视化分析 （本月/本周/气体含量数据可视化） -->
    <view class="container">
      <uni-ec-canvas
          class="chart1"
          ref="chart1"
          id="mychart-line"
          canvas-id="mychart-line"
          :ec="zhexian"
      ></uni-ec-canvas>
    </view>
    <view class="container">
      <uni-ec-canvas
          class="chart2"
          ref="chart2"
          id="mychart-pie"
          canvas-id="mychart-pie"
          :ec="bingzhuang"
      ></uni-ec-canvas>
    </view>
    <view class="container">
      <uni-ec-canvas
          class="chart3"
          ref="chart3"
          id="mychart-bar"
          canvas-id="mychart-bar"
          :ec="zhuzhuang"
      ></uni-ec-canvas>
    </view>
    <view class="container">
      <uni-ec-canvas
          class="chart4"
          ref="chart4"
          id="mychart-leida"
          canvas-id="mychart-bar"
          :ec="leida"
      ></uni-ec-canvas>
    </view>
  </view>
</template>

<script>
  import uniEcCanvas  from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
  import * as echarts from '@/components/uni-ec-canvas/echarts'
  import dayjs from 'dayjs'
	export default {
    components: {
      uniEcCanvas
    },
		data() {
			return {

        statusBarHeight: 0,
        memberId: '',
        zhexian: {
          chart: null,
          options: {}
        },
        bingzhuang:{
          chart: null,
          options: {}
        },
        zhuzhuang:{
          chart: null,
          options: {}
        },
        leida:{
          chart: null,
          options: {}
        },
        memberDetail: {},
        deviceDataList: [],
        deviceData: {
          hydrogen: 0,
          hydrogen_sulfide: 0,
          methanol: 0,
          ethylene_glycol: 0,
          ethylamine: 0,
          indole: 0
        }
			}
		},
    async onShow() {

    },
    async mounted() {
      // 获取高度
      this.getHeight()
      // 获取用户信息
      this.memberDetail = await this.$api.memberDetail(uni.getStorageSync('memberId'))
      // 获取设备数据
      this.deviceDataList = await this.$api.deviceDataList({
        device_id: this.memberDetail.device_id,
        member_id: this.memberDetail.id,
      })
      // 设置当天数据
      this.setDayData()
      this.$refs.chart1.init(this.initChart1)
      this.$refs.chart2.init(this.initChart2)
      this.$refs.chart3.init(this.initChart3)
      this.$refs.chart4.init(this.initChart4)
    },
		methods: {
      getHeight() {
        let that = this;
        let sysinfo = wx.getSystemInfoSync(),
            statusHeight = sysinfo.statusBarHeight,//状态栏高度
            isiOS = sysinfo.system.indexOf('iOS') > -1,
            navHeight;
        if (!isiOS) {//胶囊高度
          navHeight = 48;
        } else {
          navHeight = 44;
        }
        that.statusBarHeight=statusHeight+navHeight
      },
      setDayData() {
        this.deviceData = this.deviceDataList.find(item => dayjs(item.publish_time).format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD'))
      },
      // 折线图
      initChart1(canvas, width, height, dpr) {
         this.zhexian.chart = echarts.init(canvas, null, {
           width: width,
           height: height,
           devicePixelRatio: dpr // new
         });
         canvas.setChart(this.zhexian.chart);
         // deviceList 近七天
        const showData = this.deviceDataList.filter(item => dayjs(item.publish_time).isAfter(dayjs().subtract(7, 'day')))
        const xData = showData.map(item => dayjs(item.publish_time).format('MM-DD'))
        const legendData = [
          {
            name: '氨气',
            data: showData.map(item => item.hydrogen)
          },
          {
            name: '硫化氢',
            data: showData.map(item => item.hydrogen_sulfide)
          },
          {
            name: '甲酸醇',
            data: showData.map(item => item.methanol)
          },
          {
            name: '甲硫二醇',
            data: showData.map(item => item.ethylene_glycol)
          },
          {
            name: '乙胺',
            data: showData.map(item => item.ethylamine)
          },
          {
            name: '吲哚',
            data: showData.map(item => item.indole)
          }
        ]
        console.log('legendData', legendData)
        this.zhexian.options = {
          title: {
            text: '六种气体近一周的数值显示--折线图',
            left: 'center'
          },
          legend: {
            data: ['氨气', '硫化氢', '甲酸醇','甲硫二醇','乙胺','吲哚'],
            width: 250,
            top: 30,
            left: 'center',
            backgroundColor: 'blue',
            z: 100
          },
          grid: {
            containLabel: true,
            top: '100',
            height:'250'
          },
          // 点击展示详细数值
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#fff'
            }
            // show: false
          },
          yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              color: '#fff'
            }
            // show: false
          },
          series: legendData.map(el => {
            return {
              ...el,
              type: 'line',
              smooth: true,
            }
          })
        };
        this.zhexian.chart.setOption(this.zhexian.options);
        return this.zhexian.chart;
     },
      // 饼状图
      initChart2(canvas, width, height, dpr) {
        this.bingzhuang.chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(this.bingzhuang.chart);
        const showData = this.deviceDataList
        const legendData = [
          {
            name: '氨气',
            value: showData.map(item => Number(item.hydrogen)).reduce((a, b) => a + b, 0)
          },
          {
            name: '硫化氢',
            value: showData.map(item => Number(item.hydrogen_sulfide)).reduce((a, b) => a + b, 0)
          },
          {
            name: '甲酸醇',
            value: showData.map(item => Number(item.methanol)).reduce((a, b) => a + b, 0)
          },
          {
            name: '甲硫二醇',
            value: showData.map(item => Number(item.ethylene_glycol)).reduce((a, b) => a + b, 0)
          },
          {
            name: '乙胺',
            value: showData.map(item => Number(item.ethylamine)).reduce((a, b) => a + b, 0)
          },
          {
            name: '吲哚',
            value: showData.map(item => Number(item.indole)).reduce((a, b) => a + b, 0)
          }
        ]
        this.bingzhuang.options = {
          title: {
            text: '六种气体数值显示--饼状图',
            left: 'center',
            top:'0'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            width: 250,
            top: '30',
            left: 'center',
            backgroundColor: 'blue',
          },
          series: [{
            label: {
              normal: {
                fontSize: 13
              }
            },
            type: 'pie',
            center: ['50%', '50%'],//位置
            radius: ['50%', '30%'],//圈大小
            data: legendData
          }],
        }
        this.bingzhuang.chart.setOption(this.bingzhuang.options);
        return this.bingzhuang.chart;
      },
      // 柱状图
      initChart3(canvas, width, height, dpr) {
        this.zhuzhuang.chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(this.zhuzhuang.chart);
        // deviceList 近七天
        const showData = this.deviceDataList.filter(item => dayjs(item.publish_time).isAfter(dayjs().subtract(7, 'day')))
        const xData = showData.map(item => dayjs(item.publish_time).format('MM-DD'))
        const legendData = [
          {
            name: '氨气',
            data: showData.map(item => item.hydrogen)
          },
          {
            name: '硫化氢',
            data: showData.map(item => item.hydrogen_sulfide)
          },
          {
            name: '甲酸醇',
            data: showData.map(item => item.methanol)
          },
          {
            name: '甲硫二醇',
            data: showData.map(item => item.ethylene_glycol)
          },
          {
            name: '乙胺',
            data: showData.map(item => item.ethylamine)
          },
          {
            name: '吲哚',
            data: showData.map(item => item.indole)
          }
        ]
         this.zhuzhuang.options = {
           title: {
             text: '六种气体近一周的数值显示--柱状图',
             left: 'center'
           },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            confine: true
          },
           legend: {
             data: ['氨气', '硫化氢', '甲酸醇','甲硫二醇','乙胺','吲哚'],
             width: 250,
             top: 30,
             left: 'center',
             backgroundColor: 'blue',
             z: 100
           },
           grid: {
             containLabel: true,
             top: '100',
             height:'250'
           },
          xAxis: [{
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              show: true,
              color: '#fff'
            },
            data: xData
          }],
           yAxis: [
             {
               type: 'value',
               axisLine: {
                 lineStyle: {
                   color: '#999'
                 }
               },
               axisLabel: {
                 color: '#fff'
               }
             }
           ],
          series: legendData.map(el => {
            return {
              ...el,
              type: 'bar',
              barGap: 0,
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              }
            }
          })
        };
         this.zhuzhuang.chart.setOption(this.zhuzhuang.options);
          return this.zhuzhuang.chart;
        }
      },
      // 饼状图
      initChart4(canvas, width, height, dpr) {
      this.leida.chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(this.leida.chart);
      const showData = this.deviceDataList
      const legendData = [
        {
          name: '氨气',
          value: showData.map(item => Number(item.hydrogen)).reduce((a, b) => a + b, 0)
        },
        {
          name: '硫化氢',
          value: showData.map(item => Number(item.hydrogen_sulfide)).reduce((a, b) => a + b, 0)
        },
        {
          name: '甲酸醇',
          value: showData.map(item => Number(item.methanol)).reduce((a, b) => a + b, 0)
        },
        {
          name: '甲硫二醇',
          value: showData.map(item => Number(item.ethylene_glycol)).reduce((a, b) => a + b, 0)
        },
        {
          name: '乙胺',
          value: showData.map(item => Number(item.ethylamine)).reduce((a, b) => a + b, 0)
        },
        {
          name: '吲哚',
          value: showData.map(item => Number(item.indole)).reduce((a, b) => a + b, 0)
        }
      ]
      this.leida.options = {
        title: {
          text: '六种气体数值显示--饼状图',
          left: 'center',
          top:'0'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          width: 250,
          top: '30',
          left: 'center',
          backgroundColor: 'blue',
        },
        radar: {
          // shape: 'circle',
          indicator: legendData.map(item => {
            return {
              name: item.name,
              max: item.value
            }
          })
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: legendData.map(item => item.value),
                name: "",
              },
            ],
          },
        ],
      }
      this.leida.chart.setOption(this.leida.options);
      return this.leida.chart;
    },
	}
</script>

<style lang="scss">
.data {
  height: 100%;
  position: relative;
  z-index: 2;
}
.uni-ec-canvas{
  width:100%;
  height:100%;
  display:block;
}
/* # 是通过id查找 ； 在微信小程序中使用的单位是rpx，1pt=1px=2rpx*/

.title1{
  width: auto;
  height: 100rpx;
  text-align: center;
  /* margin: 5,auto; */
}
.all{
  position: fixed;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -999;
}
.text1{
  width: auto;
  height: 150rpx;
  line-height: 150rpx;
  font-size: 40rpx;
  color: rgb(178, 53, 209);
  font-family: "Source Han Sans CN", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/* 厕所臭味气体情况 */
#navView{
  display: flex;  /* 应用flex布局 ，所有的子元素排在一行*/
  flex-wrap: wrap; /* 换行*/
  height: 500rpx;
  align-content: space-around; /* 多行垂直排列*/
  font-size: 30rpx;
  font-weight: 500;
  color: rgb(53, 224, 76);
  margin-top: 0rpx;
  margin-bottom: 100rpx;
}
.gas{
  width: 150rpx;
  text-align: center;
  margin: 0 50rpx;
  position: relative;
}
.gas > img{
  width: 150rpx;
  height: 150rpx;
}


/* 可视化样式设置 */
.container {
  /* position: absolute; */
  width: 100%;
  height: 700rpx;
  display: flex;
  padding: 5rpx;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.chart1{
  width: 100%;
  height: 500px;
}
.chart2{
  width: 100%;
  height: 500px;
}
.chart3{
  width: 100%;
  height: 500px;
}
</style>
